
<template>
  <div class="app-container">
    <u-page-config :filter-array="filterArray" v-model="filter" :actionBtn="actionBtn" label-width="100px"
      :getList="getList" :tableData="tableData" :tableColumn="tableColumn" :total="total" :loading="loading"
      showSelection @handleSelectionChange="handleSelectionChange" @addRow="addRow" @removeRow="removeRow"
      @editRow="editRow" @rowDetail="rowDetail" @export="handleExport">

      <template #branchCode="scope">
        <treeselect style="width:240px" v-model="filter.data.branchCode" :options="branchDataOptions"
          :normalizer="branchNormalizer" :show-count="true" placeholder="选择网点" noOptionsText="暂无选项"
          noResultsText="没有匹配的搜索结果" />
      </template>
    </u-page-config>

    <el-dialog :title="title" :visible.sync="visible" width="1200px" :close-on-click-modal="false">
      <u-form ref="uFormRef" label-width='134px' v-model="form" :defaultForm="defaultForm" :formArray="formArray"
        :show-btn="false" @submit="onsubmit" @close="visible = false" :mode="mode">
        <template #branchCode="scope">
          <!-- 1 -->
          <treeselect style="width:100%" v-model="form.branchCode" :options="branchDataOptions"
            :normalizer="branchNormalizer" :show-count="true" placeholder="选择网点" noOptionsText="暂无选项"
            noResultsText="没有匹配的搜索结果" />
        </template>

        <template #image="scope">
          <u-file-upload :value="form.pic" :limit="3" :fileSize="10" @input="imageUploadChange" />
        </template>
      </u-form>
    </el-dialog>
  </div>
</template>

<script>
import UPageConfig from '@/components/uPageConfig/index'
import UForm from '@/components/uForm'
import table from "@/mixin/uTable";
import Treeselect from "@riophae/vue-treeselect";

import {
  listBmfw,
  getbmfw,
  delBmfw,
  addBmfw,
  updateBmfw,
} from "@/api/info/bmfw";

export default {
  name: "UpdatePlan",
  mixins: [table],
  components: { UPageConfig, UForm, Treeselect },
  data() {
    return {
      filter: {
        pageSize: 10,
        pageNum: 1,
        data: {
          branchCode: undefined
        }
      },
      filterArray: [
        { label: "标题", key: "title", type: "input" },
        { label: "描述", key: "description", type: "input" },
        { label: "网点", key: "branchCode", type: "slot", slot: 'branchCode' },
        { label: "排序号", key: "sort", type: "input" },
      ],
      tableColumn: [
        { label: "标题", prop: "title", showOverflowTooltip: true },
        // { label: "描述", prop: "description", type: 'slot', slot: "description",showOverflowTooltip: true },
        { label: "照片", prop: "pic", type: 'image' },
        { label: "排序", prop: "sort" },
        { label: "网点", prop: "branchName" },
        // {label: "处理人", prop: "operationUserName", type: 'slot', slot: 'operationUserName'},
        {
          label: "操作", type: "btn", attr: { width: 180 }, btnArr: [
            {
              icon: "el-icon-edit-outline",
              text: "修改",
              emit: "editRow",
              permissions: 'info:bmfw:edit',
            },
            {
              icon: "el-icon-delete",
              text: "删除",
              emit: "removeRow",
              permissions: 'info:bmfw:remove'
            },
          ]
        }
      ],
      actionBtn: [
        {
          type: 'primary',
          text: '创建',
          icon: 'el-icon-plus',
          emit: 'addRow',
          permissions: 'info:bmfw:add'
        },
        {
          type: 'success',
          text: '修改',
          icon: 'el-icon-edit',
          emit: 'editRow',
          permissions: 'info:bmfw:edit',
          disabledRule: () => this.ids.length !== 1
        },
        // {
        //   type: 'success',
        //   text: '修改',
        //   icon: 'el-icon-edit',
        //   emit: 'editRow',
        //   permissions: 'info:bmfw:edit'
        // },
        {
          type: 'danger',
          text: '删除',
          icon: 'el-icon-delete',
          emit: 'removeRow',
          permissions: 'info:bmfw:remove',
          disabledRule: () => this.ids.length === 0
        },
        {
          type: 'warning',
          text: '导出',
          icon: 'el-icon-download',
          emit: 'export',
          permissions: 'info:bmfw:export'
        },
      ],
      // 表单默认必填参数 重置表单时需要用到
      defaultForm: {
        id: null,
        title: null,
        description: null,
        pic: null,
        branchCode: null,
        deptId: null,
        createUserId: null,
        status: 0,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        sort: null
      },
      formArray: [
        {
          label: "标题: ", key: "title", col: 24, type: "input",
          rule: { required: true, message: '标题不能为空！', trigger: 'blur' },
        },
        {
          label: "网点: ", key: "branchCode", col: 24, type: "slot", slot: 'branchCode',
          rule: { required: true, message: '网点不能为空！', trigger: 'blur' },
        },
        { label: "排序", key: "sort", col: 12, type: "input",
        rule: { required: true, message: '描述不能为空！', trigger: 'blur' }},
        {
          label: "描述: ", key: "description", col: 24, type: "editor",
          rule: { required: true, message: '描述不能为空！', trigger: 'blur' },
        },
        { label: "照片：", key: "pic", col: 24, slot: "image" },
      ],
    };
  },
  computed: {
    // 网点树形数据
    branchDataOptions() {
      return this.$store.state.device.branchDataOptions || []
    },
  },
  methods: {
    /** 转换分组树形图数据结构 */
    branchNormalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.branchCode,
        label: node.branchName,
        children: node.children || undefined,
      };
    },
    // 表单提交接口相关配置
    formSubmitFunConfig() {
      return {
        addFunc: addBmfw,
        modifyFunc: updateBmfw,
        pk: 'id',
        options: {
          ...this.form,
          deploymentCode: "deploymentCode"
        },
        cbFunc: () => {
          this.visible = false
        }
      }
    },
    // 删除
    removeRow(row) {
      const id = row ? row.id : this.ids;
      this.removeTip(async () => {
        await delBmfw(id)
      }, row && row.id ? '该项数据' : '已勾选项数据')
    },
    // 添加
    addRow() {
      this.mode = 'form';
      this.title = "添加便民服务";
      this.visible = true;
    },
    // 修改
    async editRow(row) {
      this.mode = 'form'
      this.title = "修改便民服务";
      if (row) { //点击的表格内修改按钮
        this.form = JSON.parse(JSON.stringify(row))
      } else { //点击表格上方修改按钮
        const selectedItem = this.tableData.find(item => this.ids[0] === item.id) || {}
        this.form = JSON.parse(JSON.stringify(selectedItem))
      }
      this.visible = true
      await this.$nextTick()
    },
    /** 多选框选中数据 */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
    },
    // 添加文件上传成功、删除图片时都会被调用
    imageUploadChange(imgUrl) {
      this.form.pic = imgUrl
    },
    /** 查询工单列表 */
    getList() {
      this.getInit(listBmfw, {})
    },
    /** 详细按钮操作 */
    rowDetail(row) {
      this.mode = 'text'
      // 直接拿到这一行的数据赋值
      this.form = row;
      this.visible = true
      this.title = '详细信息'
      // 如果当前行数据不完整 调接口拿详情数据
      // this.getDetail('详细信息', WorkOrderDetail, row.id)
    },
    /** 导出按钮操作 */
    handleExport() {
      const currentDate = this.parseTime(new Date());
      const ids = this.ids;
      const params = this.getListRequestParams();
      this.download(
        "/info/bmfw/export",
        params,
        `便民服务_${currentDate}.xlsx`,
      );
    },
  }
}
</script>

<style lang="scss" scoped>
.form-item-wrap {
  display: flex;
}
</style>
